<template>
    <div class="box">
<!--        问题总结 教室评语-->
        <el-row :gutter="20">
            <el-col :span="12"><div class="sums">
              <div >问题总结</div>
              <div class="remark-p">
                <p >{{ problem }}</p>
              </div>
            </div></el-col>
            <el-col :span="12">
              <div class="remark">
                <div class="danger">老师评语</div>
                <div class="remark-p">
                  <p >{{ comment }}</p>
                </div>

            </div></el-col>
        </el-row>

        <el-table
                :v-loading="loading"
                :data="homeworkList"
                :header-cell-style="{textAlign:'center',fontSize: '16px',fontWeight:500,color:'#000'}"
                :row-style="{marginTop:'16px',borderSpacing:'20px'}"
                :cell-style="{textAlign:'center',color:'#000'}"
                style="width: 100%;
                     border-radius: 20pxground: #F2F4FF;
                    border:1px solid #EFEFEF">
            <el-table-column
                    fixed
                    type="index"
                    :index="indexMethod"
                    label="题号"
                    width="140">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="questionName"
                    :show-overflow-tooltip="true"
                    label="题目名称"
                    width="350">
            </el-table-column>
            <el-table-column
                    prop="questionType"
                    label="题型"
                    :formatter="typeFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    :formatter="categoryFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="level"
                    label="难度"
                    :formatter="levelFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="结果"
                    :formatter="statusFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    prop="status"
                    width="140">
                <template slot-scope="scope">
<!--                    <el-button @click="changeStatus(scope.row)" type="text" size="small">{{scope.row.status===0?'未完成':'已完成'}}</el-button>-->
                    <!--                            <el-button type="text" size="small" @click="getDetail(scope.$index)">查看</el-button>-->
                    <el-button type="text" size="small" @click="goDetail(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--翻页-->
        <div class="changePage">
            <el-pagination
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="45%"
                :before-close="handleClose">
           <section>
               <h3>作业题目</h3>
             <div style="text-align: left" v-html="currentHomework.questionInformation"></div>
               <div class="text-right">结果：<span class="blue">{{ currentHomework.results===0?'正确':currentHomework.results===1?'错误':'暂无'}}</span></div>
           </section>
            <section>
                <h3>答案信息</h3>
                <div style="text-align: left"  v-html="currentHomework.studentAnswer"></div>

            </section>
            <section>
                <h3>正确答案</h3>
              <div style="text-align: left"  v-html="currentHomework.answerInformation"></div>
            </section>
            <div class="text-left" v-if="currentHomework.questionType===1||currentHomework.questionType===0"> <el-button type="text" @click="downLoadAnswer">下载附件</el-button></div>
        </el-dialog>

    </div>
</template>

<script>
import {getFeedback, getStudentInfoList} from "../../api/course";
import {mapState} from "vuex";

export default {
        name: "homeworkSubmitted",
        created() {
          console.log("1234")
          this.taskLogId=this.$route.query.id
          this.onLoad();
        },
        computed:{
          ...mapState({
            ea_question_type:state=>state.dict.dictTree.ea_question_type['arr'],
            ea_question_category:state=>state.dict.dictTree.ea_question_category['arr'],
            ea_question_difficulty:state=>state.dict.dictTree.ea_question_difficulty['arr'],
          })
        },
        data(){
            return{
              publishId:'',
              taskLogId:'',
              total:0,
              dialogVisible:false,
              loading:false,
              homeworkList:[],
              problem:'',
              comment:'',
              currentPage:1,
              pageSize:10,
              currentPn:1,
              currentHomework:{}
            }
        },
        props:{
            tableData:{
                type:[Object,Array],
                default(){
                    return[
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                    ]
                }
            }
        },
        methods:{
          onLoad(){
            this.getHomeworkDetail()
          },
          indexMethod(index){
            return index+this.currentPn
          },
          //详情
          getHomeworkDetail(){
            getStudentInfoList({taskLogId:this.taskLogId,pageSize:this.pageSize,pageNum:this.currentPage}).then(res=>{
              this.total = res.total
              this.homeworkList = res.rows
              this.publishId=res.rows[0].classPublishId
              if(res.total!==0){
                getFeedback({id:this.publishId}).then(res=>{
                  console.log(res)
                  this.problem=res.data.taskFeedback
                  this.comment=res.data.comment
                })
              }
            })
          },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
              this.currentPage = val
              this.currentPn=this.pageSize*(this.currentPage-1)+1
              this.onLoad()
            },
            goDetail(data){
            //    弹框
                console.log(data)
              this.currentHomework=data
                this.dialogVisible= true
            },
          typeFormat(row) {
            let name = "";
            this.ea_question_type.forEach(function (item) {
              if (row.questionType == item.value) {
                name = item.label;
              }
            });
            return name;
          },
          levelFormat(row) {
            let name = "";
            this.ea_question_difficulty.forEach(function (item) {
              if (row.level == item.value) {
                name = item.label;
              }
            });
            return name;
          },
          categoryFormat(row) {
            let name = "";
            this.ea_question_category.forEach(function (item) {
              if (row.type == item.value) {
                name = item.label;
              }
            });
            return name;
          },
          statusFormat(row){
            let name='';
            name=row.results===0?'正确':row.results===null?'暂无':'错误';
            return name;
          },
          //关闭之前
          handleClose(){
            this.dialogVisible=false
          },
          //下载附件
          downLoadAnswer(){
            if(this.currentHomework.answerUrls==''||this.currentHomework.answerUrls==null||this.currentHomework.answerUrls==undefined){
              this.$message.warning('该试题答案没有附件')
            }
            else{
              this.$download.name(this.currentHomework.answerUrls)
            }
          },
        }
    }
</script>

<style scoped lang="less">
    /deep/ .el-pagination.is-background .el-pager li{
        background: white;
    }
    .sums,.remark{
        background: white;
        margin: 20px 0;
        padding: 20px;
        height: 250px;

      .remark-p{
        color: black;
        font-size: 16px;
        height: 150px;
        overflow-y: auto;
        line-height: 25px;
        padding: 10px;
      }

        .danger{
            color: rgba(255, 47, 0, 1);
        }
        div{
            color: #66b1ff;
            font-size: 18px;
            margin-bottom: 20px;
        }
        p{
            text-align: left;
        }
    }
    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: rgba(240, 240, 240, 1);
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      border-radius: 10px;
      background-color: rgba(240, 240, 240, .5);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      background-color: rgba(240, 240, 240, .5);
    }
    .box /deep/ .el-dialog{
        min-height: 200px;
    }
    /deep/ .el-dialog__header{
        padding: 0;
    }
    .text-left{
        text-align: left;
    }
    section{
        margin-bottom: 20px;
        h3{
            font-weight: 500;
            font-size: 18px;
            text-align: left;
        }
        p{
            margin: 10px 0;
            text-align: left;
        }
    }
    .blue{
        color: #66b1ff;
    }
    .text-right{
        text-align: right;
    }
    .changePage{
        text-align: right;
    }
    /deep/ .el-table__body{
        border-collapse: separate;
        border-spacing:0 10px;
    }
    .box{
        width: 1200px;
        margin: auto;
    }
</style>
